<script setup>
import { ref } from "vue"
import { useStore } from "@/stores/counter";
const store = useStore()
const yan = ref(['red', '#f90', '#ff0', '#1b1', '#0ff', '#01f', '#c1c']);
function downys(color) {
  store.downys(color)
}
</script>

<template>
  <ul class="box">
    <li class="list" @click="downys(color)" v-for="( color, index) in yan" :key="index"
      :style="{ backgroundColor: color }"></li>
  </ul>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

.box {
  width: 100px;
  height: 300px;
  border: #ccc 2px solid;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.list {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
</style>